<template>
  <PageContainer>
    <view class="container">
      <Header title="邀请开通" />
      <view>
        <template v-for="(v, index) in backgroundImgs" :key="index">
          <view class="img-box">
            <view v-if="index == 1" class="form-container">
              <view class="form-box">
                <view class="form-title">
                  <text>立即加入资源平台</text>
                </view>
                <view class="form-desc">
                  <text>将有专员联系您，为贵组织提供系统方案</text>
                </view>

                <uni-forms ref="formRef" :modelValue="formData">
                  <uni-forms-item name="name">
                    <view class="form-item">
                      <view class="icon-box">
                        <text class="ali-icon icon-fans" style="font-size: 40rpx"></text>
                        <view
                          class="vertical-bar"
                          style="width: 1px; transform: translateY(-50%)"
                        ></view>
                      </view>
                      <UniEasyinput
                        class="input-style"
                        v-model="formData.name"
                        placeholder="请输入联系人姓名"
                        :inputBorder="false"
                        placeholderStyle="font-size:30rpx"
                        :clearable="false"
                      ></UniEasyinput>
                    </view>
                  </uni-forms-item>

                  <uni-forms-item name="phone">
                    <view class="form-item">
                      <view class="icon-box">
                        <text class="ali-icon icon-mob" style="font-size: 40rpx"></text>
                        <view
                          class="vertical-bar"
                          style="width: 1px; transform: translateY(-50%)"
                        ></view>
                      </view>
                      <UniEasyinput
                        class="input-style"
                        v-model="formData.phone"
                        placeholder="输入联系人手机号"
                        :inputBorder="false"
                        placeholderStyle="font-size:30rpx"
                        :clearable="false"
                      ></UniEasyinput>
                    </view>
                  </uni-forms-item>

                  <uni-forms-item name="orgName">
                    <view class="form-item">
                      <view class="icon-box">
                        <text class="ali-icon icon-a-Group654" style="font-size: 40rpx"></text>
                        <view
                          class="vertical-bar"
                          style="width: 1px; transform: translateY(-50%)"
                        ></view>
                      </view>
                      <UniEasyinput
                        class="input-style"
                        v-model="formData.orgName"
                        placeholder="输入您所属组织名称"
                        :inputBorder="false"
                        placeholderStyle="font-size:30rpx"
                        :clearable="false"
                      ></UniEasyinput>
                    </view>
                  </uni-forms-item>

                  <view style="display: flex; justify-content: center">
                    <TButton
                      text="提交资料"
                      customClass="apply-for-btn"
                      type="primary"
                      @click="handleSubmit"
                      :customStyle="{
                        height: '64rpx',
                        fontSize: '28rpx',
                        color: 'rgba(255, 242, 229, 1)',
                        lineHeight: '64rpx',
                        width: '414rpx',
                        border: '0px solid undefined',
                        backgroundColor: 'rgba(255, 127, 0, 1)',
                        borderRadius: '88rpx',
                      }"
                    ></TButton>
                  </view>
                </uni-forms>
              </view>
            </view>
            <Images :src="v" width="100%" height="fit-content" mode="widthFix" />
          </view>
        </template>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* inviteCooperation 邀请合作 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import Images from '@/components/TImage/index.vue';
  import { onMounted, reactive, ref } from 'vue';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import uniForms from '@/components/Form/uni_modules/uni-forms/uni-forms.vue';
  import uniFormsItem from '@/components/Form/uni_modules/uni-forms-item/uni-forms-item.vue';
  import { onLoad } from '@/router';
  import { saasIntentionApply } from '@/api/cooperation/index';
  import type { ISaasIntentionApply } from '@/api/cooperation/types';
  import { decrypt } from '@/utils/CryptoJS';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { phoneReg } from '@/utils/Reg';

  const backgroundImgs = [
    'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saasHome/home_01.jpg',
    'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saasHome/home_02.jpg',
    'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saasHome/home_03.jpg',
    'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saasHome/home_04.jpg',
    'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saasHome/home_05.jpg',
    'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saasHome/home_06.jpg',
  ];
  onLoad<'InviteCooperation'>(async (op) => {
    formData.value.inviteAppUserInfoId = decrypt(op.key);
  });
  onMounted(() => {
    formRef.value[0]?.setRules(rules.value);
  });
  const formRef = ref<any>(null);
  const rules = ref({
    name: {
      rules: [
        {
          required: true,
          errorMessage: '联系人姓名不能为空',
        },
      ],
      validateTrigger: 'submit',
    },
    phone: {
      rules: [
        {
          required: true,
          errorMessage: '联系人手机号不能为空',
        },
        {
          validateFunction: (
            rule: any,
            value: string,
            data: any,
            callback: (arg0: string) => void,
          ) => {
            if (!phoneReg.test(value)) callback('请输入正确的联系电话');
            return true;
          },
        },
      ],
      validateTrigger: 'submit',
    },
    orgName: {
      rules: [
        {
          required: true,
          errorMessage: '组织名称不能为空',
        },
      ],
      validateTrigger: 'submit',
    },
  });

  const initForm = {
    name: '',
    phone: '',
    orgName: '',
    inviteAppUserInfoId: '',
  };
  const formData = ref<ISaasIntentionApply>({ ...initForm });

  const handleSubmit = async () => {
    await formRef.value[0].validate();
    await saasIntentionApply(formData.value);
    formData.value = { ...initForm };
    uni.showModal({
      title: '提示',
      content: '提交成功！我们将尽快安排服务专员与您联系，请耐心等待！',
      showCancel: false,
      confirmText: '确定',
    });
  };
</script>

<style lang="scss" scoped>
  .container {
    .img-box {
      position: relative;
      width: 100%;

      .form-container {
        position: absolute;
        left: 0;
        padding: 0 40rpx;
        box-sizing: border-box;
        width: 100%;
        height: 100%;

        .form-box {
          height: 100%;
          background-color: rgba(26, 125, 220, 0.2);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          border-radius: 0.5rem;

          .form-title {
            font-size: 1.5rem;
            line-height: 2rem;
            --tw-text-opacity: 1;
            color: rgba(255, 255, 255, var(--tw-text-opacity));
            font-weight: 700;
            word-break: break-all;
          }

          .form-desc {
            font-size: 0.75rem;
            line-height: 1rem;
            color: rgba(255, 255, 255, 0.4);
            word-break: break-all;
          }
        }

        .form-item {
          border-radius: 0.125rem;
          width: 528rpx;
          background-color: white;
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .err-text {
            height: 60rpx;
            width: 528rpx;
          }

          .icon-box {
            width: 72rpx;
            position: relative;
            flex-shrink: 0;
            text-align: center;
          }

          .vertical-bar {
            width: 1px;
            transform: translateY(-50%);
            position: absolute;
            right: 0;
            top: 50%;
            height: 24rpx;
            background-color: #333333;
          }

          .input-style {
            font-size: 30rpx;
            color: rgba(38, 38, 38, 1);
          }
        }
      }
    }
  }
</style>
